<template>
  <div v-if="total > size" class="myCenter">
    <ul class="page-content">
      <li class="page-item" v-if="current !== 1" @click="toPage(-1)">
        👈
      </li>
      <template v-if="current === 1">
        <li class="page-item"
            :style="{background: index === 1 ? color : '', color: index === 1 ? 'var(--white)' : ''}"
            v-for="index of realButtonSize"
            :key="index"
            @click="toPage(index)">
          {{ index }}
        </li>
      </template>
      <template v-else-if="current === totalSize">
        <li class="page-item"
            :style="{background: index === realButtonSize ? color : '', color: index === realButtonSize ? 'var(--white)' : ''}"
            v-for="index of realButtonSize"
            :key="index"
            @click="toPage(current - (realButtonSize - index))">
          {{ current - (realButtonSize - index) }}
        </li>
      </template>
      <template v-else>
        <li class="page-item"
            :style="{background: Math.ceil(realButtonSize/2) - index === 0 ? color : '', color: Math.ceil(realButtonSize/2) - index === 0 ? 'var(--white)' : ''}"
            v-for="index of realButtonSize"
            :key="index"
            @click="toPage(current - (Math.ceil(realButtonSize/2) - index))">
          {{ current - (Math.ceil(realButtonSize / 2) - index) }}
        </li>
      </template>
      <li class="page-item" v-if="current !== totalSize" @click="toPage(-2)">
        👉
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 1
    },
    size: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
    buttonSize: {
      type: Number,
      default: 3
    },
    color: {
      type: String,
      default: ""
    }
  },

  data() {
    return {
      totalSize: 0,
      realButtonSize: 0
    }
  },

  computed: {},

  watch: {
    total(newVal) {
      this.totalSize = Math.ceil(this.total / this.size);
      this.realButtonSize = this.buttonSize < this.totalSize ? this.buttonSize : this.totalSize;
    }
  },

  created() {
    this.totalSize = Math.ceil(this.total / this.size);
    this.realButtonSize = this.buttonSize < this.totalSize ? this.buttonSize : this.totalSize;
  },

  mounted() {

  },

  methods: {
    toPage(flag) {
      if (flag === -1) {
        this.$emit("toPage", this.current - 1);
      } else if (flag === -2) {
        this.$emit("toPage", this.current + 1);
      } else {
        this.$emit("toPage", flag);
      }
    }
  }
}
</script>

<style scoped>

.page-content {
  display: flex;
  padding: 0;
  margin: 30px 0;
}

.page-item {
  margin: 0 10px;
  list-style: none;
  border: 1px solid var(--lightGray);
  width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  border-radius: 50%;
  color: var(--black);
  font-size: 14px;
  cursor: pointer;
}

.page-item:hover {
  border: 1px solid var(--themeBackground);
  box-shadow: 0 0 5px var(--themeBackground);
}
</style>
